<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        div{
            height: 500px;
            width: 500px;
            margin: auto;
            text-align: center;
        }
        div img{
            height: 400px;
            width: 500px;
            margin-top: 30px;
        }
        div button{

        }
        div p{
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //获取dom元素
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var img = document.getElementsByTagName("img")[0];
            var p = document.getElementsByTagName("p")[0];
            //图片数组
            var imgArr = ["../resource/img/footer.PNG","../resource/img/2.webp"];
            var index = 0;
            img.src = imgArr[index];
            p.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
            //切换
            prev.onclick = function () {
                index--;
                if (index < 0) index = imgArr.length-1;
                img.src = imgArr[index];
                p.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
            }
            next.onclick = function () {
                index++;
                if (index > imgArr.length-1) index = 0;
                img.src = imgArr[index];
                p.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
            }
        }
    </script>
</head>
<body>
<div>
    <p></p>
    <img src="" alt="加载失败">
    <button type="button" id="prev">prev</button>
    <button type="button" id="next">next</button>
</div>
</body>
</html>